import React, { useEffect, useState } from 'react';
import './forwork.css'
import axios from 'axios';
import { useNavigate } from 'react-router-dom'
import img2 from './images/222.png'
const ForWork = () => {
  // 添加状态控制显示全部
  const [showAll, setShowAll] = useState(false);
  const [list, setList] = useState([]);

  // 模拟患者数据
  const patientData = [
    {
      _id: 1,
      huanName: '蛋蛋',
      sex: '男',
      age: '1岁11月20天',
      desc: '时常觉得自己长得太帅，主人配不上它，一照镜子就对着镜子傻笑。初步诊断为：傻狗。',
      date: '05/07 11:47',
      pl: 1
    },
    {
      _id: 2,
      huanName: '嘻嘻',
      sex: '女',
      age: '2岁11月20天',
      desc: '时常觉得自己长得太好看，主人配不上它，一打开美颜相机就对着手机傻笑。初步诊断为：傲娇狗。',
      date: '05/07 11:47',
      pl: 3
    },
  ];

  const navigate = useNavigate();

  // 获取列表信息
  const getlist = () => {
    axios.get('http://localhost:3000/huanlist').then((res) => {
      const combinedList = [...patientData, ...res.data.list].flat();
      setList(combinedList);
    });
  };


  // 新增的点击处理函数
  const handlePatientClick = (patient) => {
    console.log('查看患者详情:', patient);
    // 实际使用时可以跳转到详情页：
    // navigate(`/patients/${patient._id}`)
  };

  useEffect(() => {
    getlist();
  }, []);

  // 根据showAll状态决定显示的数据量
  const displayedList = showAll ? list : list.slice(0, 2);

  return (
    <div className="App">
      {/* 顶部信息栏 */}
      <div className="app-header">
        <div className="app-header-content">
          <img src={img2} />
          <div>
            <h2>肖神医<span style={{fontSize:'12px',paddingLeft:6,fontWeight:'100'}}>河北大学附属医院</span></h2>
            <p className="app-header-stats">新增患者: +123 待回复: 9 待确认: 0</p>
          </div>
        </div>
      </div>

      {/* 修改后的待办事项 */}
      <div className="todo-schedule">
        <p>参与南方医科大学珠江医院的血液净化...</p>
        <p>2020.05.07 10:30</p>
       
      </div>
      {/* 修改后的按钮组 */}
      <div className="action-buttons">
        <button className="action-button" onClick={() => navigate('/bin')}>
          我的病历
        </button>
        <button className="action-button" onClick={() => navigate('/health')}>
          排班管理
        </button>
        <button className="action-button">开处方</button>
        <button className="action-button">门诊预约</button>
        <button  className="action-button" onClick={() => setShowAll(!showAll)}>
          {showAll ? '收起列表' : '查看全部'}
        </button>
      </div>

      {/* 病历列表 */}
      <div className="patient-list">
        {displayedList.map((patient) => (
          <div
            key={patient._id}
            className="patient-item"
            onClick={() => handlePatientClick(patient)}
          >
            <p>姓名: {patient.huanName}</p>
            <p>性别: {patient.sex}</p>
            <p>年龄: {patient.age}</p>
            <p>诊断信息: {patient.desc}</p>
            <p>日期: {patient.date}</p>
            <p>评论数: {patient.pl}</p>
          </div>
        ))}

        {/* 新增按钮 */}
        <button className='add' onClick={() => navigate('/add')}>+</button>
      </div>
    </div>
  );
};

export default ForWork;